<template>
    <div class="container2" ref="container2">
        <div class="enum">
            <div :class="{select: schoolType == 'Middle'}" @click.stop="type_click($event,'Middle')">中学</div>
            <div :class="{select: schoolType == 'Primary'}" @click.stop="type_click($event,'Primary')">小学</div>
            <div :class="{select: schoolType == 'Kindergarten'}" @click.stop="type_click($event,'Kindergarten')">幼儿园</div>
        </div>

        <div class="map">
            <img :src="mapImage" ref="mapImage" alt="" usemap="#map"/>
            <map name="map" ref="map" @mouseleave="leave($event)">
                <area shape="poly" @mouseenter="enter($event)" @click.stop="change_location($event,key)"
                      v-for="(item,key) in areas" :db="key" :key="key"/>
            </map>
        </div>
        <div ref="count" class="count">
            <div style="position: relative"
                 v-html="jv.SchoolTypeEnum.getData(schoolType).remark + ':' + count + '家'"></div>
        </div>
    </div>
</template>
<script>
    export default ({
        props: {
            location: {type: String, default: ""},
            schoolType: {type: String, default: ""}
        },
        data() {
            return {
                mapImage: "/img/map/bg.png",
                count: 0,
                areas: {
                    "沭阳县": "434,5,424,34,455,120,466,119,473,145,466,153,486,166,441,251,445,266,429,292,413,281,383,305,374,300,379,285,356,255,258,286,226,200,211,197,215,176,231,174,236,133,228,129,232,102,257,94,254,69,311,85,337,53,381,40,386,52,404,20"
                        .split(","),//沐阳
                    "宿豫区": "29,204,42,218,66,213,77,201,97,231,148,212,199,215,223,198,246,245,242,258,259,287,252,320,261,323,253,365,231,360,223,375,183,355,152,349,136,288,38,280,26,244,7,253,0,225,26,213"
                        .split(","),//宿豫
                    "泗阳县": "255,287,279,282,285,270,297,279,303,267,359,256,378,285,372,304,346,362,353,438,336,448,361,485,344,583,316,585,282,571,253,502,273,444,263,449,235,412,239,389,257,378,247,364,262,323,251,318"
                        .split(","),//泗阳
                    "宿城区": "24,289,53,274,140,293,151,348,222,378,235,361,257,374,250,389,231,389,233,408,264,449,273,445,277,452,267,459,254,502,226,477,201,443,180,465,142,458,142,444,134,430,127,440,91,417,89,386,93,372,62,313,56,325,44,316,21,297"
                        .split(","),//宿城
                    "泗洪县": "54,566,80,575,75,494,92,469,87,434,99,424,102,434,128,437,136,428,144,449,137,459,174,456,179,465,198,444,212,452,252,503,282,571,312,585,343,583,358,602,253,661,223,706,155,710,140,724,118,705,109,717,112,731,73,756,38,728,42,720,37,712,19,718,18,700,36,680,39,655,29,651,52,632,43,617"
                        .split(",") //泗洪
                }
            }
        },
        mounted() {
            jv.await(200, 10, () => {
                var multiple = parseInt(getComputedStyle(this.$refs.mapImage).width) / 498;

                if (multiple) {
                    Object.values(this.areas).forEachIndexed((item, index) => {
                        this.$refs.map.children[index].setAttribute("coords", item.map(it => it * multiple).join(","))
                    });
                    return false;
                }
            });

            this.query_click();
        },
        watch: {
            location(val) {
                if (this.location) {
                    this.mapImage = "/img/map/" + val + ".png"
                } else {
                    this.mapImage = "/img/map/bg.png"
                }
                this.query_click()
            },
            schoolType(val) {
                this.query_click()
            }
        },

        methods: {
            query_click() {
                this.$http.post("/stastics/count", {schoolType: this.schoolType, location: this.location}).then(res => {
                    var count = res.data.data;

                    this.count = count;


                    this.$nextTick(() => {

                        var body_click = (e) => {
                            this.change_location(e, "")
                        };
                        this.$refs.container2.addEventListener("click", body_click)

                        if (this.location) {
                            var area = this.$refs.map.children[Object.keys(this.areas).indexOf(this.location)];

                            //中心点显示
                            var ps = this.getPositionSize(area.getAttribute("coords"));
                            var center = {
                                left: parseInt(ps.left) + parseInt(ps.width) / 2,
                                top: parseInt(ps.top) + parseInt(ps.height) / 2
                            };
                            var div_style = getComputedStyle(this.$refs.count);
                            var left = center.left - parseInt(div_style.width) / 2,
                                top = center.top - parseInt(div_style.height) / 2;

                            this.$refs.count.style.left = left + "px";
                            this.$refs.count.style.top = top + "px";
                        } else {
                            this.$refs.count.style.left = "0px";
                            this.$refs.count.style.top = "70px";
                        }
                    });

                })
            },
            type_click(e, v) {
                var target = e.target;
                target.parentElement.getElementsByClassName("select").forEach(it => it.classList.remove('select'));
                target.classList.add("select");
                this.$emit("change_schoolType", v);
            },
            getPositionSize(coords) {
                var points = [];
                var items = coords.split(",");
                for (var i = 0, len = items.length; i < len; i += 2) {
                    points.push({x: items[i], y: items[i + 1]});
                }

                var left = Number.MAX_SAFE_INTEGER, top = Number.MAX_SAFE_INTEGER, right = Number.MIN_SAFE_INTEGER,
                    bottom = Number.MIN_SAFE_INTEGER;
                points.forEach(it => {
                    left = Math.min(it.x, left);
                    top = Math.min(it.y, top);
                    right = Math.max(it.x, right);
                    bottom = Math.max(it.y, bottom);
                });

                return {
                    left: left + "px",
                    top: top + "px",
                    width: (right - left) + "px",
                    height: (bottom - top) + "px"
                }
            },
            change_location(e, key) {
                this.$emit("change_location", key);
            },
            leave(e) {
                if (this.location) {
                    this.mapImage = "/img/map/" + this.location + ".png"
                } else {
                    this.mapImage = "/img/map/bg.png"
                }
            },
            enter(e) {
                var area = e.target;

                var name = area.getAttribute("db");
                this.mapImage = "/img/map/" + name + ".png"

                //var index = area.indexOfParent;
                // this.$refs.location.getElementsByClassName("show").forEach(it => it.classList.remove("show"));
                // var hoverImage = this.$refs.location.children[index];
                // hoverImage.classList.add("show");
                //
                // var ps = this.getPositionSize(area.getAttribute("coords"));
                //
                // Object.assign(hoverImage.style, ps);
            }
        }
    })
</script>

<style scoped>
    .container2 {
        position: relative;
    }

    .enum {
        display: flex;
        justify-content: center;
    }

    .enum > div {
        color: white;
        margin: 4px 10px;
        background-color: #62BBFA;
        padding: 4px 20px;
        border-radius: 4px;
        box-shadow: 0 0 8px -1px gray;
        cursor: default;
    }

    .enum > .select {
        background-color: #2189D2;
        border: solid 1px white;
        cursor: default;
    }

    .map {
        position: relative;
        text-align: center;
        padding: 20px 15px;
    }

    .map > img {
        width: auto;
        max-height: 70vh;
    }

    .map > svg {

    }

    .location {
        position: absolute;
        left: 0;
        top: 0;
    }

    .location img {
        position: absolute;
        display: none;
    }

    .location img.show {
        display: block;
    }

    .count {
        position: absolute;
        color: #00F0FF;
        border-radius: 5px;
        padding: 4px 12px;
        border: solid 1px white;
    }

    .count:before {
        content: " ";
        display: block;
        position: absolute;
        border-radius: 5px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        opacity: 0.7;
        background-color: gray;
    }


</style>
